<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="/js/vue.global.js"></script>
	<script src="/js/axios.min.js"></script>
	<script src="/js/axios-helper.js"></script>
	<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"/>
	<script src="//unpkg.com/element-plus"></script>
	<!-- 使用图标 -->
	<script src="https://unpkg.com/@element-plus/icons-vue"></script>
</head>
<body>
<div id="app">
	<el-table :data="entities" stripe border style="width:100%">
		<el-table-column prop="id" label="ID" width="45"></el-table-column>
		<el-table-column prop="name" label="名字" width="120"></el-table-column>
		<el-table-column prop="score" label="分数" width="90"></el-table-column>
		<el-table-column prop="info" label="备注" width="200"></el-table-column>
		<el-table-column label="操作" width="220px">
			<template #default="scope">
				<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
				<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>

	<el-pagination
			v-model:current-page="pageNumber"
			v-model:page-size="pageSize"
			:page-sizes="[5, 10, 15, 20]"
			:background="true"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"></el-pagination>

</div>
<script>
	const {createApp, ref, onMounted} = Vue
	const app = createApp({
		setup(){
			const entities = ref([]);

			const pageNumber = ref(1);
			const pageSize = ref(5);
			const total = ref(0);
			const handleSizeChange = (val) => {
				pageSize.value = val;
				query();
			};
			const handleCurrentChange = (val) => {
				pageNumber.value = val;
				query();
			};

			const params = ref({});
			const query = () => {
				axios.get(`/stu/query/${pageNumber.value}/${pageSize.value}`, {
					params: params.value
				}).then((result) => {
					console.log(result);
					entities.value = result.data.records;
					total.value = result.data.total;
				}).catch((errorMsg) => {
					ElementPlus.ElMessage({
						type: "error",
						message: errorMsg,
						showClose: true,
					});
				});
			};



			onMounted(()=>{
				query();
			})
			return{
				entities,
				pageNumber,
				pageSize,
				total,
				handleSizeChange,
				handleCurrentChange,
				query,
			}
		}
	})
	app.use(ElementPlus);
	for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
		app.component(key, component);
	}
	app.mount('#app');
</script>

</body>
</html>